<template>
    <div class="FormInfo">
        <el-row>
            <el-col :offset="1" :span="22">
                <div class="grid-content bg-purple-dark">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <el-button class="button" type="text" @click="props.handleBack"><i
                                        class="el-icon-arrow-left" />返回</el-button>
                                <span>{{ props.formInfo?.title }}</span>
                                <div></div>
                            </div>
                        </template>
                        <el-form ref="ruleFormRef" :model="paramForm" label-position="right" :rules="props.formInfo?.rules"
                            label-width="100px" class="demo-ruleForm">

                            <el-form-item v-for="item in props.formInfo?.rowList" :key="item.code" :label="item.name"
                                :prop="item.code">
                                <!-- 输入框 input -->
                                <template v-if="item.type == FormType.input">
                                    <el-input v-model="paramForm[item.code]"></el-input>
                                </template>

                                <!-- 下拉选择 select -->
                                <template v-else-if="item.type == FormType.select">
                                    <el-select v-model="paramForm[item.code]" :placeholder="item.remark">
                                        <el-option v-for="(ops, index) in item.itemArr" :key="index" :label="ops.lable"
                                            :value="ops.value"></el-option>
                                    </el-select>
                                </template>

                                <!-- 日期选择 date -->
                                <template v-else-if="item.type == FormType.datePicker">
                                    <el-date-picker v-model="paramForm[item.code]" type="date"
                                        :placeholder="item.remark"></el-date-picker>
                                </template>

                                <!-- 时间选择 time -->
                                <template v-else-if="item.type == FormType.timePicker">
                                    <el-time-picker v-model="paramForm[item.code]" type="time"
                                        :placeholder="item.remark"></el-time-picker>
                                </template>

                                <!-- 滑动按钮 switch -->
                                <template v-else-if="item.type == FormType.switch">
                                    <el-switch v-model="paramForm[item.code]"></el-switch>
                                </template>

                                <!-- 复选框 checkbox -->
                                <template v-else-if="item.type == FormType.checkbox">
                                    <el-checkbox-group v-model="paramForm[item.code]">
                                        <el-checkbox v-for="(ops, index) in item.itemArr" :key="index" :label="ops.lable"
                                            :name="ops.code"></el-checkbox>
                                    </el-checkbox-group>
                                </template>

                                <!-- 单选 radio -->
                                <template v-else-if="item.type == FormType.radio">
                                    <el-radio-group v-model="paramForm[item.code]">
                                        <el-radio v-for="(ops, index) in item.itemArr" :key="index"
                                            :label="ops.lable"></el-radio>
                                    </el-radio-group>
                                </template>

                                <!-- 文本输入 textarea -->
                                <template v-else-if="item.type == FormType.textarea">
                                    <el-input v-model="paramForm[item.code]" :type="item.type"></el-input>
                                </template>

                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="props.formInfo?.submitForm">确定</el-button>
                                <el-button @click="restForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { FormType } from '@/entity/enums/CommonType';
import FormContent from '@/entity/form/FormContent'
import TableRow from '@/entity/table/TableRow';
import { ref, defineProps } from 'vue';

const props = defineProps({
    formInfo: FormContent,
    handleBack: Function
})

const paramForm = ref(props.formInfo?.paramForm);

const restForm = () => {
    const rowList = props.formInfo?.rowList;
    rowList?.forEach(x => {
        paramForm.value[x.code] = x.value;
    })
};

</script>
  
<style lang="stylus" scoped>
  .FormInfo
    margin-top 20px
    .demo-ruleForm
      text-align left
    .info
      text-align left
      padding-left 20px
      margin-bottom 20px
      font-size 12px
    .card-header
      display flex
      justify-content space-between
      align-items center
    .text
      font-size 14px
    .item
      margin-bottom 18px
    .box-card
      width 100%
  </style>
  